﻿
@{
    Layout = null;
    ViewBag.Title = "Login";
}
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link href="~/Content/h-ui/static/h-ui/css/H-ui.min.css" rel="stylesheet" />
    <link href="~/Content/h-ui/static/h-ui/css/H-ui.login.css" rel="stylesheet" />
    <link href="~/Content/h-ui/static/h-ui.admin/css/style.css" rel="stylesheet" />
    <link href="~/Content/h-ui/lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" />

    <title>后台登录 - 掌上租</title>
    <style>
        .row > label {
            text-align: right;
        }

        .row > label, .row > div {
            float: left;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="loginWraper">
        <div id="loginform" class="loginBox">
            <form class="form form-horizontal" action="@Url.Action("SubmitLogin","Home")" method="post" id="form" autocomplete="off">
                <div class="row cl">
                    <label class="form-label col-3"><i class="Hui-iconfont">&#xe60d;</i></label>
                    <div class="formControls col-5">
                        <input name="PhoneNum" type="text" placeholder="手机号码" class="input-text size-L">
                    </div>
                    <div class="col-4"> </div>
                </div>


                <div class="row cl">
                    <label class="form-label col-3"><i class="Hui-iconfont">&#xe60e;</i></label>
                    <div class="formControls col-5">
                        <input name="Password" type="password" placeholder="密码" class="input-text size-L">
                    </div>
                    <div class="col-4"> </div>
                </div>
                <div class="row cl">
                    <div class="formControls col-8 col-offset-3">
                        <input name="VerCode" class="input-text size-L" type="text" placeholder="验证码" style="width:150px;">
                        <img src="@Url.Action("GetVerCode","Home")" id="imgVerifyCode" />
                        <a id="btn_ChangeImg" href="javascript:void(0);">看不清，换一张</a>
                    </div>

                </div>
                <div class="row">
                    <div class="formControls col-8 col-offset-3">
                        <label for="online">
                            <input type="checkbox" name="IsRemeberMe" id="IsRemeberMe" value="true">
                            使我保持登录状态
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="formControls col-8 col-offset-3">
                        <input id="btn_Login" type="submit" class="btn btn-success radius size-L" value="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
                        <input type="button" class="btn btn-default radius size-L" value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="~/Content/h-ui/lib/jquery/1.9.1/jquery.min.js"></script>
    <script src="~/Content/h-ui/static/h-ui/js/H-ui.js"></script>
    <script src="~/Content/h-ui/lib/layer/2.4/layer.js"></script>
    <script src="~/Content/h-ui/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script src="~/Content/h-ui/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script src="~/Content/h-ui/lib/jquery.validation/1.14.0/messages_zh.js"></script>

    <script>
        $("#imgVerifyCode,#btn_ChangeImg").click(function () {
            var src = "@Url.Action("GetVerCode", "Home")?" + Math.random();
            $("#imgVerifyCode").attr("src", src )
        })


        $(function () {
            //增加手机号验证规则
            $.validator.addMethod("isMobile", function (value, element) {
                var length = value.length;
                var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
                return this.optional(element) || (length == 11 && mobile.test(value));
            }, "请正确填写您的手机号码");

            $("#form").validate({
                rules: {
                    PhoneNum: {
                        required: true,
                        isMobile:true
                    },
                    Password: {
                        required: true,
                    },
                    VerCode: {
                        required: true,
                        rangelength:[4,4]
                     }
                },

                messages: {
                    PhoneNum: {
                        required: "请输入手机号",
                        isMobile:"请输入正确的手机号码"
                    },
                    Password: {
                        required: "请输入密码"
                    },
                    VerCode: {
                        required: "请输入验证码",
                        rangelength:"请输入4位验证码"
                    }
                },

                //提交表单
                submitHandler: function (form) {
                    //使用ajax方式提交表单
                    $(form).ajaxSubmit({
                        success: function (data) {
                            console.log(data)
                            //State=1成功，-1失败
                            if (data.State == 1) {
                                //页面跳转
                                location.href = "@Url.Action("Index","Home")";
                            } else {
                                layer.msg(data.ErrorMessage, { icon: 2 });
                            }
                        }
                    });
                }
            });
        })
    </script>
</body>



